<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>

<html>
<head>
	<title>Departments</title>
	<script type="text/javascript" src="<%=request.getContextPath()%>/spring/resources/js/jquery-1.7.1.js"></script>
	<script type="text/javascript">
    $(function() {
        refreshDeptList();

        function refreshDeptList() {
            $.ajax({
            	type: 'GET',
                url: '<%=request.getContextPath()%>/spring/dept/getAll',
                success: function(data) {
                    var deptTable = "<tr>";
                    deptTable += "<td>Id</td>";
                    deptTable += "<td>Name</td>";                    
                    deptTable += "</tr>";
                    var depts = $.parseJSON(data);
                    for(var i = 0; i < depts.length; i++) {
                    	deptTable += "<tr>";
                    	deptTable += "<td>" + depts[i].id + "</td>";
                    	deptTable += "<td>" + depts[i].name + "</td>";                    	
                    	deptTable += "</tr>";
                    }
                    $('#deptList').html(deptTable);
                }
            });
        }
        
        function createDept() {
        	$.ajax({
        		type: 'POST',
                url: '<%=request.getContextPath()%>/spring/dept/create',
                data: {name:$("#name").val()},
                success: function(data) {
                	refreshDeptList();
                }
        	});
        }

        $('#refreshDepts').click(refreshDeptList);              

        $('#createDeptBtn').click(createDept);

        $('#clearDeptList').click(function() {
            $('#deptList').empty();
        });
    });
	</script>
</head>
<body>
<div id="createDeptDiv">
  <fieldset>
    <label for="name" id="name_label">Name</label>
    <input type="text" name="name" id="name" size="30" value="" class="text-input" />
    <button id="createDeptBtn">Create</button>
    <br /><br />    
  </fieldset>
</div>
<div>
    <table id="deptList"></table>
</div>
<button id="refreshDepts">Refresh </button>
<button id="clearDeptList">Clear</button>

</body>
</html>